<template>
	<view class="content">
		<view id="top" style="padding-top: 20rpx;">
			<u-search placeholder="大家都在搜[划拳]" v-model="title" @custom="search"
				:actionStyle="{textAlign:'right',fontSize:'32rpx',fontWeight: 700}"></u-search>
			<view class="search_title">
				<text>搜索历史</text> <text @click="esc">清空</text>
			</view>
			<view class="search_history">
				<view class="search_history_item" v-for="(item ,index) in search_history" @click="searchHistory(item)">
					{{item.title}}
				</view>
			</view>

		</view>

		<view v-if="!searchShow" class="godds_ranking">
			<view class="godds_ranking_title">
				<image src="../../static/ranking.png" mode=""></image><text>团建游戏排行榜</text>
			</view>

			<view class="goods_item" v-for="(item ,index) in rankingList" @click="nav(item.id)">
				<view :class="index==0?'num1':(index==1?'num2':index==2?'num3':'num')">
					{{index+1}}
				</view>
				<image :src="item.pic" mode=""></image>
				<view class="text">
					<view class="title">
						{{item.title}}
					</view>
					<view class="brief">
						{{item.desc||'暂无介绍'}}
					</view>
					<view class="type">
						<view class="" v-for="(itemType ,Xindex) in  item.type_list" v-if="Xindex<3">
							{{itemType}}
						</view>
					</view>

				</view>
			</view>
		</view>

		<goodsVideoList v-else :goodsList="goodsList" @scrolltolower="scrolltolower"
			:scrollHeight="`calc(100vh - ${domHeight}px)`" />

	</view>
</template>

<script>
	import goodsVideoList from '@/components/goodsVideoList/goodsVideoList.vue'
	export default {
		components: {
			goodsVideoList,
		},
		data() {
			return {
				searchShow: false,
				domHeight:0,
				search_history: [],
				rankingList: [],
				title: '',
				goodsList: [],
				page: 1
			}
		},

		onLoad() {
			this.$myRuquest('home/index/activity_list', {
				page: 1,
				num: 9,
				status: 2
			}).then(res => {
				this.rankingList = res.data.list
			})
			this.upSearch()
		},
		methods: {
			esc(){
				this.$myRuquest('home/user/search_del').then(res=>{
					this.upSearch()
				})
				
			},
			upTop(){
				const query = uni.createSelectorQuery();
				query.select('#top').boundingClientRect(data => {
					this.domHeight = data.height
				}).exec();
			},
			upSearch() {
				this.$myRuquest('home/index/search_list',{page:1,num:20}).then(res => {
						this.search_history=res.data
					 this.upTop()
				})

			},
			upData() {
				if (this.page < 1) return;
				let data = {
					page: this.page,
					num: 10,
					title: this.title
				}
				this.$myRuquest('home/index/activity_list', data).then(res => {
					this.goodsList.push(...res.data.list)

					this.page++
					if (res.data.list.length < this.num) this.page = -1
				})
			},
			searchHistory(item){
				this.title=item.title
				this.search()
			},
			search() {
				this.searchShow = true
				this.page = 1
				this.goodsList = []
				this.upData()
				this.upSearch()
			},
			scrolltolower() {
				this.upData()
			},
			nav(id) {
				uni.navigateTo({
					url: '../goodsDetails/goodsDetails?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0upx 30upx;

		.search_title {
			display: flex;
			justify-content: space-between;
			margin: 20upx 0;

			text:nth-child(1) {
				font-size: 28upx;
				color: #000000;
				font-weight: 700;
			}

			text:nth-child(2) {
				font-size: 28upx;
				color: #666666;

			}
		}

		.search_history {
			display: flex;
			flex-wrap: wrap;

			.search_history_item {
				margin-right: 12upx;
				background-color: #F6F6F6;
				height: 50upx;
				line-height: 50upx;
				padding: 0 20upx;
				margin-bottom: 10upx;
				border-radius: 25upx;
				font-size: 24upx;

			}
		}

		.godds_ranking {
			background-image: linear-gradient(to bottom, #F5F5F5, #FFFFFF);
			padding: 18upx;
			border-radius: 12upx;
			margin-top: 10upx;

			.godds_ranking_title {
				margin-bottom: 20upx;
				display: flex;
				align-items: center;
				font-size: 28upx;
				color: #FCBD74;

				background-image: -webkit-linear-gradient(90deg, #FCBD74, #AC7D3D);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-weight: 700;

				image {
					width: 56upx;
					height: 56upx;
					margin-right: 8upx;
				}
			}
		}

		.goods_item {
			display: flex;
			align-items: center;
			margin-bottom: 50upx;

			.num,
			.num1,
			.num2,
			.num3 {
				width: 40upx;
				height: 40upx;
				border-radius: 4upx;
				color: #666666;
				text-align: center;
			}

			.num1 {
				background-color: #AE7E3E;
				color: #fff;
			}

			.num2 {
				background-color: #D8A05B;
				color: #fff;
			}

			.num3 {
				background-color: #FABB72;
				color: #fff;
			}

			image {
				width: 136upx;
				height: 136upx;
				border-radius: 8upx;
				margin: 0 20upx;
			}

			.text {
				width: calc(100% - 216upx);
				height: 136upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					font-size: 28upx;
					color: #333333;
					font-weight: 700;
					padding-right: 40upx;
					overflow: hidden;
					/*超出部分隐藏*/
					white-space: nowrap;
					/*不换行*/
					text-overflow: ellipsis;
					/*超出部分文字以...显示*/
				}

				.brief {
					color: #666666;
					font-size: 24upx;
					padding-right: 40upx;
					overflow: hidden;
					/*超出部分隐藏*/
					white-space: nowrap;
					/*不换行*/
					text-overflow: ellipsis;
					/*超出部分文字以...显示*/
				}

				.type {
					display: flex;
					white-space: nowrap;
					overflow: hidden;
					
text-overflow: ellipsis;

					view {
						height: 40upx;
						padding: 0 20upx;
						border-radius: 20upx;
						line-height: 40upx;
						font-size: 24upx;
						background-color: #FEF2E2;
						color: #AC7D3D;
						margin-right: 12upx;
					}

					view:nth-child(3) {
						margin-right: 0;
					}
				}
			}
		}
	}
</style>
